<template>
  <div class="success-container">
    <!-- 头部 -->
    <div class="header-bar">
      <van-icon name="arrow-left" class="back-icon" @click="goBack" />
      <h2 class="header-title">提交结果</h2>
      <div class="header-actions">
        <van-icon name="more-o" size="20" />
        <van-icon name="eye-o" size="20" style="margin-left: 10px;" />
      </div>
    </div>

    <!-- 成功内容 -->
    <div class="success-content">
      <div class="success-icon">
        <div class="icon-circle">
          <van-icon name="success" size="48" color="#fff" />
        </div>
      </div>
      <h1 class="success-title">提交成功</h1>
      <p class="success-message">您的评价已提交成功,感谢您的反馈</p>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <van-button 
        type="primary" 
        block 
        size="large"
        class="action-btn"
        @click="fillAnother"
      >
        再填一份
      </van-button>
      <van-button 
        plain 
        block 
        size="large"
        class="action-btn return-btn"
        @click="goBack"
      >
        返回
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { clearAnswers } from './data'

const router = useRouter()
const route = useRoute()
const questionnaireId = Number(route.params.id)

const goBack = () => {
  router.push('/home')
}

const fillAnother = () => {
  // 清除当前问卷的答案
  clearAnswers(questionnaireId)
  // 返回问卷列表
  router.push('/questionnaire')
}
</script>

<style scoped>
.success-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-icon {
  font-size: 20px;
  cursor: pointer;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  text-align: center;
}

.header-actions {
  display: flex;
  align-items: center;
}

.success-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.success-icon {
  margin-bottom: 30px;
}

.icon-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(79, 195, 247, 0.3);
}

.success-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
}

.success-message {
  font-size: 14px;
  color: #999;
  margin: 0;
  line-height: 1.6;
}

.action-buttons {
  padding: 20px;
  background-color: #fff;
}

.action-btn {
  margin-bottom: 15px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
}

.action-btn:last-child {
  margin-bottom: 0;
}

.return-btn {
  border: 1px solid #ddd;
  color: #333;
  background-color: #fff;
}
</style>

